import React from 'react';
import { Modal, Button, Space, Tag } from 'antd';
import { DownloadOutlined, ClockCircleOutlined, UserOutlined } from '@ant-design/icons';
import styles from './AnnouncementDetail.module.less';

interface AnnouncementDetailProps {
  visible: boolean;
  onClose: () => void;
  data: {
    id: string;
    title: string;
    type: string;
    content: string;
    publisher: string;
    publishTime: string;
    attachments?: { name: string; url: string }[];
  } | null;
}

const AnnouncementDetail: React.FC<AnnouncementDetailProps> = ({
  visible,
  onClose,
  data
}) => {
  if (!data) return null;

  const handleDownload = (url: string, filename: string) => {
    // 处理文件下载
    console.log('Downloading:', filename);
  };

  return (
    <Modal
      title="公告详情"
      open={visible}
      onCancel={onClose}
      width={800}
      footer={null}
      className={styles.detailModal}
    >
      <div className={styles.header}>
        <h2>{data.title}</h2>
        <div className={styles.meta}>
          <Space size={16}>
            <span>
              <UserOutlined /> {data.publisher}
            </span>
            <span>
              <ClockCircleOutlined /> {data.publishTime}
            </span>
            <Tag color="blue">{data.type}</Tag>
          </Space>
        </div>
      </div>
      
      <div className={styles.content}>
        {data.content}
      </div>

      {data.attachments && data.attachments.length > 0 && (
        <div className={styles.attachments}>
          <h3>附件列表</h3>
          <Space direction="vertical" style={{ width: '100%' }}>
            {data.attachments.map((file, index) => (
              <Button
                key={index}
                icon={<DownloadOutlined />}
                onClick={() => handleDownload(file.url, file.name)}
                type="link"
              >
                {file.name}
              </Button>
            ))}
          </Space>
        </div>
      )}
    </Modal>
  );
};

export default AnnouncementDetail; 